<template>
  <p>{{ count1 }}</p>
  <button @click="add1">+</button>
  <hr />
  <p>{{ count2 }}</p>
  <button @click="add2">+</button>
</template>
<script setup>
import { ref, watch } from "vue";
const count1 = ref(0);
const count2 = ref(0);
//watch可以观察和响应数据的变化，当数据发生更改时执行回调函数
/* watch(count1,(newVal,oldVal)=>{
    console.log(`Count changed from ${oldVal} to ${newVal}`)
}); */
//watch可以观察一个数据源，也可以观察多个数据源
/* watch([count1,count2],([newCount1,newCount2],[oldCount1,oldCount2])=>{
    console.log(oldCount1,oldCount2)
    console.log(newCount1,newCount2)
});
 */
//有些时候我们希望观察一段代码中的变量变量，但是我并不明确的知道哪些变量会变化
//第一次的时候，会执行函数，并且收集函数中的依赖的变量
//自动收集依赖，当依赖发生变化时重新执行回调
watch(
  () => {
    //只要在函数体内读取到了某个响应式的变量，就可以收集依赖了
    //不管干啥都可以
    console.log(count1.value)
    console.log(count2.value)
  },
  (newVal, oldVal) => {
    console.log(`changed from ${oldVal} to ${newVal}`);
  }
);
const add1 = () => count1.value++;
const add2 = () => count2.value++;
</script>
